<!--
 * @Description: 监测点信息
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:22:35
-->
<template>
  <div>
    <!-- 布局  4：20-->
    <div>
      <el-col :span="4">
        <!-- 树结构 显示右边框 设置为实线 -->
        <div class="empData"  style="border-right:1px solid #ccc; height: calc(100vh - 60px); padding-right: 10px;">
          <el-input v-model="filterText" placeholder="输入关键字进行过滤" ></el-input>
         <!-- 对树形结构绑定点击事件 -->
          <el-tree  @node-click="handlerClick" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <!-- 如果点击了设备  则展示信息 即设备id存在-->
        <div v-if="params.device_id" class="table" style="margin-left: 10px">
            <div class="title" style="margin:10 20; height:28px; background-color:#f4f4f4">
              <i class="el-icon-s-goods" style="margin:6px"></i>
              工程信息
            </div>
            <div style="margin:10px">
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="tit1">工程编号</div></el-col>
              <el-col :span="8"><div class="tit2">{{engdata.serial_number}}</div></el-col>
              <el-col :span="4"><div class="tit1">工程名称</div></el-col>
              <el-col :span="8"><div class="tit2">{{engdata.name}}</div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="tit1">工程类型</div></el-col>
              <el-col :span="8"><div class="tit2">{{engdata.type}}</div></el-col>
              <el-col :span="4"><div class="tit1">工程状态</div></el-col>
              <el-col :span="8">
                <div>                
                <el-tag v-if="engdata.status==='监测中'" type="success">监测中</el-tag>
                <el-tag v-else type="warning">未监测</el-tag>
              </div>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="tit1">开始时间</div></el-col>
              <el-col :span="8"><div class="tit2">{{engdata.begin_time}}</div></el-col>
              <el-col :span="4"><div class="tit1">结束时间</div></el-col>
              <el-col :span="8"><div class="tit2">{{engdata.end_time}}</div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="tit1">地址</div></el-col>
              <el-col :span="20"><div class="tit2">{{engdata.address}}</div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="tit1">工程负责人</div></el-col>
              <el-col :span="20"><div class="tit2">{{engdata.id}}</div></el-col>
            </el-row>
            </div>
            <div class="title" style="margin:10 20; height:28px; background-color:#f4f4f4">
              <i class="el-icon-video-camera-solid" style="margin:6px"></i>
              设备信息
            </div>
            <div style="margin:10px">
              <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="tit1">工程设备</div></el-col>
              <el-col :span="8"><div class="tit2">{{devdata.serial_number}}</div></el-col>
              <el-col :span="4"><div class="tit1">设备名称</div></el-col>
              <el-col :span="8"><div class="tit2">{{devdata.name}}</div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="tit1">绑定状态</div></el-col>
              <el-col :span="8">
              <div>                
                <el-tag v-if="devdata.bind_status===1" type="success">已绑定</el-tag>
                <el-tag v-else type="warning">未绑定</el-tag>
              </div>
              </el-col>
              <el-col :span="4"><div class="tit1">在线状态</div></el-col>
              <el-col :span="8">
              <div>                
                <el-tag v-if="devdata.online_status===1" type="success">在线</el-tag>
                <el-tag v-else type="warning">离线</el-tag>
              </div>
                </el-col>
            </el-row>
            </div>
        </div>
         <!-- 如果没有点击设备那么显示提示信息 即设备id不存在-->
        <div v-else style="color:red;text-align:center">请选择设备进行查看</div>
      </el-col>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      // 过滤文本
      filterText:"",
      // 树形结构数据源
      data: [],
      // 树形结构配置项
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 携带参数
        params: {
        page: 1,
        pageSize: 10,
        engineer_id: "",
        device_id:"",
      },
      //保存右侧查询参数
      devData:"",
      //保存工程信息
      engdata:"",
      //保存设备信息
      devdata:""
    };
  },
  computed: {},
  methods: {
     // 获取工程设备数据--左侧数据
    async loadEmpData() {
      let res = await get("/engineer/findEngineerDeviceTree");
      // console.log(res,"设备树");
      this.data = res.data;
    },
     // 点击树形节点
    handlerClick(data){
      // 点击工程data就是工程数据，点击设备。。
      console.log(data,'树形节点');
      // 如果children存在则说明是工程
      if(!data.children){
        this.params.engineer_id=data.engineer_id;
        this.params.device_id=data.id;
        this.devData=data.id;
      }
      // this.getEmpData();
      this.getdevData();
    },
    async getdevData(){
      // 通过获取点击的设备id来发送请求,获取工程设备信息
      let res = await get('/device/findDeviceDetail',{
        id:this.devData});
      console.log(res,'设备详情');
      this.devdata=res.data;
      this.engdata=res.data.engineer;
    },
    // 过滤节点的方法
    filterNode(value, data) {
      if (!value) return true;
      // indexOf寻找字符串中某个字符，存在返回下标
      // return data.label.indexOf(value) !== -1;
      return data.name.indexOf(value) !== -1;
    },
  },
  watch: {
  // 监听文本
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
     this.loadEmpData();
  },
  mounted() {   
  },
};
</script>
<style>
.title{
    font-size:16px;
}
.el-row{
  margin:28px;
  font-size: 14px;
}
.tit1{
  font-weight:bold;
}
.el-tag{
  size:medium;
}
</style>